<template>
  <div class="app-container">
    <div style="margin-bottom: 50px;">
      <div style="position: fixed;right: 20px;z-index: 200;" v-if="type !== 'detail'">
        <el-button size="mini" @click="cancel">取消</el-button>
        <el-button size="mini" type="primary" plain @click="save('保存')">保存</el-button>
        <el-button size="mini" type="primary" @click="save('提交')">提交</el-button>
      </div>
      <div v-else style="position: fixed;right: 20px;z-index: 10000;">
        <el-button size="mini" @click="cancel" type="primary">返回</el-button>
      </div>
    </div>
    <el-form v-loading="loading" ref="form" :model="form" label-width="170px" :rules="rules" :label-position="type=='edit' || type=='add'?'top':'right'">
      <div class="card-wrap card-padding">
        <div class="table-title-wrap-other justify-start" style="border-bottom: 1px solid #e9e9e9;font-size: 16px;font-weight: bold;color: #333;">
          产品方案信息
        </div>
        <el-row style="margin-top: 30px;margin-left: 30px;" v-if="type !== 'detail'">
          <el-col :span="8">
            <el-form-item label="产品方案名称:" prop="schemeName" style="width: 75%;">
              <el-input placeholder="请输入产品方案名称" v-model="form.schemeName" maxlength="25" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产品方案编号:" prop="schemeNo" style="width: 75%;">
              <el-input placeholder="请输入产品方案编号" maxlength="25" v-model="form.schemeNo" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="产品方案类型:" prop="schemeType" style="width: 75%;">
              <el-select v-model="form.schemeType" clearable style="width: 100%;">
                <template v-for="dict in dict.type.product_scheme_type">
                  <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
                </template>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="type == 'detail'" style="font-size:14px;color:#606266;margin-left: 50px;margin-top: 30px;margin-bottom: 30px;">
          <el-col :span="8">产品方案名称：{{ form.schemeName }}</el-col>
          <el-col :span="8">产品方案编号：{{ form.schemeNo }}</el-col>
          <el-col :span="8">产品方案类型：{{ form.schemeType == 1 ? '常规' : "特殊" }}</el-col>
        </el-row>
        <el-row style="margin-top: 30px;margin-left: 30px;" v-if="type !== 'detail'">
          <el-col :span="8">
            <el-form-item label="生效时间:" prop="dateTime" style="width: 75%;">
              <el-date-picker value-format="yyyy-MM-dd" v-model="form.dateTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="type == 'detail'" style="font-size:14px;color:#606266;margin-left: 50px;">
          <el-col :span="8">生效时间：开始时间：{{ form.effectiveStartTime }}</el-col>
          <el-col :span="8">结束时间：{{ form.effectiveEndTime }}</el-col>
        </el-row>
      </div>
      <div class="card-wrap card-padding">
        <div class="table-title-wrap-other justify-start" style="border-bottom: 1px solid #e9e9e9;font-size: 16px;font-weight: bold;color: #333;">
          租赁方案
        </div>
        <el-row style="margin-left: 50px;margin-top: 30px;display: flex;justify-content: start;" v-if="type !== 'detail'">
          <div style="margin-top: 5px; font-size:14px;color:#606266">计算条件：</div>
          <div>
            <el-form-item label="适用类型：">
              <el-radio-group v-model="form.applicableType">
                <el-radio :label="2">渠道</el-radio>
                <el-radio :label="1">自营</el-radio>
                <el-radio :label="0">全部</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="计算来源：">
              <el-radio-group v-model="form.businessSource" @change="changeSplice">
                <el-radio :label="2">渠道</el-radio>
                <el-radio :label="1">自营</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="车辆类型：">
              <el-radio-group v-model="form.vehicleSource">
                <el-radio :label="1">新车</el-radio>
                <el-radio :label="2">旧车-现车</el-radio>
                <el-radio :label="3">旧车-购买</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="租赁类型：">
              <el-radio-group v-model="form.leasingType">
                <el-radio :label="1">易租</el-radio>
                <el-radio :label="2">享租</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </el-row>
        <el-row style="margin-left: 50px;margin-top: 30px; font-size:14px;color:#606266;" v-if="type == 'detail'">
          <el-col :span="2" style="font-size:14px;">计算条件</el-col>
          <el-col :span="5">
            <div style="margin-bottom: 10px;">适用类型：{{ form.applicableType == 2 ? '渠道' : form.applicableType ==1? '自营':'全部' }}</div>
            <div style="margin-bottom: 10px;">计算来源：{{ form.businessSource == 2 ? '渠道' : '自营' }}</div>
            <div style="margin-bottom: 10px;">车辆类型：{{ form.vehicleSource
                            == 1 ? '新车' : form.vehicleSource == 2 ? '旧车-现车' : "旧车-购买" }}</div>
            <div>租赁类型：{{ form.leasingType == 1 ? '易租' : "享租" }}</div>
          </el-col>
        </el-row>
        <el-row style="margin-left: 50px;margin-top: 20px;display: flex;justify-content: start;" v-if="type !== 'detail'">
          <div style="font-size:14px;color:#606266">计算方式：</div>
          <div style="margin-left: 20px;">
            <el-radio-group v-model="form.internalRateOfReturnCalcMethod" @change="changeRadio">
              <el-row>
                <el-radio :label="1" style="margin-bottom: 30px;">方案1：输入月租金计算内部收益率（IRR）</el-radio>
              </el-row>
              <el-row>
                <el-radio :label="2" style="margin-bottom: 30px;">方案2：取值年化利率（APR）测算月租金</el-radio>
              </el-row>
              <el-row>
                <el-radio :label="3">方案3：输入年化利率（APR）测算月租金</el-radio>
              </el-row>
            </el-radio-group>
          </div>
        </el-row>
        <el-row v-if="type !== 'detail'">
          <div style=" display: flex;justify-content: start;align-items: center;width: 75%;margin-left: 13%;">
            <div style="width:60% ;display: flex;justify-content: flex-start;align-items: center;">
              <span style="font-size: 13px; color: #606266;">年化利率（APR）下限：</span>
              <el-slider :disabled="form.internalRateOfReturnCalcMethod !== 3" class="my-slider" v-model="form.irrLowerLimit" style="width:70%;margin-left: 20px;" show-input :show-input-controls="false"></el-slider>
            </div>
            <div style="width: 25%;">
              <span style="font-size: 13px; color: #606266;">年化利率默认值：</span>
              <el-input :disabled="form.internalRateOfReturnCalcMethod !== 3" maxlength="10" style="width: 100px;" v-model="form.irrDefaultValue" @input="form.irrDefaultValue = form.irrDefaultValue.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/, '$1')"></el-input>
            </div>
          </div>
        </el-row>
        <el-row style="margin-left: 50px;margin-top: 20px;" v-if="type == 'detail'">
          <el-col :span="2" style="font-size:14px;color:#606266;">计算方式</el-col>
          <el-col :span="15" style="font-size:14px;color:#606266;">
            <el-row v-if="form.internalRateOfReturnCalcMethod == 1">
              <span>方案1：输入月租金计算内部收益率（IRR）</span>
            </el-row>
            <el-row v-if="form.internalRateOfReturnCalcMethod == 2">
              <span>方案2：取值年化利率（APR）测算月租金</span>
            </el-row>
            <el-row v-if="form.internalRateOfReturnCalcMethod == 3">
              <span>方案3：输入年化利率（APR）测算月租金</span>
              <span style="margin-left: 50px;">年化利率（APR）下限：{{ form.quotationProductSchemeRule.irrLowerLimit
                            }}</span>
              <span style="margin-left: 20px;">年化利率默认值：{{ form.quotationProductSchemeRule.irrDefaultValue
                            }}%</span>
            </el-row>
          </el-col>
        </el-row>
      </div>
      <div class="card-wrap card-padding">
        <div class="table-title-wrap-other justify-start" style="border-bottom: 1px solid #e9e9e9;font-size: 16px;font-weight: bold;color: #333;">
          客户类型
        </div>
        <div v-if="type !== 'detail'">
          <el-table :data="customerTypeIrrList" style="width: 50%;margin-top: 30px;margin-left: 30px;" border>
            <el-table-column label="客户类型" align="center">
              <template slot-scope="scope">
                <el-input v-if="scope.row.disabled == false" maxlength="20" readonly v-model="scope.row.quotationCustomerTypeName" placeholder="请输入"></el-input>
                <el-input v-if="scope.row.disabled ==true" maxlength="20" :disabled="scope.row.btnType ==1" readonly v-model="scope.row.quotationCustomerTypeName" placeholder="请输入"></el-input>
                <el-input v-if="scope.row.disabled == 3" maxlength="20" v-model="scope.row.quotationCustomerTypeName" placeholder="请输入"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="业务类型" align="center">
              <template slot-scope="scope">
                <el-select v-if="scope.row.disabled == false" v-model="scope.row.residualValueBusinessType" style="width: 100%;">
                  <template v-for="dict in dict.type.business_type_cz">
                    <el-option :label="dict.label" :value="dict.value" disabled :key="dict.value"></el-option>
                  </template>
                </el-select>
                <el-select v-if="scope.row.disabled ==true" v-model="scope.row.residualValueBusinessType" :disabled="scope.row.btnType ==1" style="width: 100%;">
                  <template v-for="dict in dict.type.business_type_cz">
                    <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
                  </template>
                </el-select>
                <el-select v-if="scope.row.disabled ==3" v-model="scope.row.residualValueBusinessType" style="width: 100%;">
                  <template v-for="dict in dict.type.business_type_cz">
                    <el-option :label="dict.label" :value="dict.value" :key="dict.value"></el-option>
                  </template>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100" align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.btnType==1">
                  <el-button @click="forbidden(scope.row,scope,'启用')" type="text" v-if="scope.row.disabled" size="small">启用</el-button>
                  <el-button @click="forbidden(scope.row,scope,'禁用')" type="text" v-if='!scope.row.disabled' size="small">禁用</el-button>
                  <el-button @click="forbidden(scope.row,scope,'删除')" type="text" size="small">删除</el-button>
                </div>
                <div v-if="scope.row.btnType==2">
                  <el-button @click="saveBtn(scope.row,scope)" type="text" size="small">保存</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <el-button icon="el-icon-plus" style="margin-top: 10px; cursor: pointer;margin-left: 30px;" type="success" size="mini" @click="add">
            新增客户类型
          </el-button>
        </div>
        <div v-else>
          <p style="font-size: 13px; color:#606266;margin-left: 50px;margin-top: 30px;" v-for="(item, i) in form.quotationCustomerTypeIrrList" :key="i">
            <span>客户类型{{ i + 1 }}：</span>
            <span>{{ item.quotationCustomerTypeName }}</span>
          </p>
        </div>
      </div>
      <div class="card-wrap card-padding" style="min-height: 460px;">
        <div class="table-title-wrap-other justify-start" style="border-bottom: 1px solid #e9e9e9;font-size: 16px;font-weight: bold;color: #333;">
          客户信息
        </div>
        <el-row :style="{marginLeft: (type == 'detail'?'':'30px')}">
          <el-form-item label="供应商名称:" prop="supplierIdList">
            <el-select v-model="form.supplierIdList" clearable style="width: 300px" v-if="type !== 'detail'" multiple collapse-tags>
              <template v-for="dict in insuranceLists">
                <el-option :label="dict.supplierName" :value="dict.supplierId" :key="dict.supplierId"></el-option>
              </template>
            </el-select>
            <div v-else style="display: flex;justify-content: start;align-items: center;flex-wrap: nowrap;">
              <h6 style="font-size:14px;color:#606266;" v-for="(item, i) in commonValues" :key="i">
                {{item.supplierName }}
                <span v-if="i < processedArray.length - 1">，</span>
              </h6>
            </div>
          </el-form-item>
        </el-row>
        <el-row style="margin-top: 10px;" :style="{marginLeft: (type == 'detail'?'':'30px')}">
          <el-form-item label="组织架构:">
            <div style="margin-left: 30px;" v-if="type !== 'detail'">
              <el-button type="text" @click="selectAll">全选</el-button>
              <el-button type="text" @click="cancelSelectAll">取消全选</el-button>
            </div>
            <el-cascader-panel ref="cascaderPanel" :style="{marginLeft: (type == 'detail'?'':'30px')}" placeholder="请选择组织架构" style="width: 90%;margin: 0 auto;" :options="options" v-model="form.deptIdList" :props="props"></el-cascader-panel>
          </el-form-item>
        </el-row>
      </div>
      <div class="card-wrap card-padding">
        <div class="table-title-wrap-other justify-start" style="border-bottom: 1px solid #e9e9e9;font-size: 16px;font-weight: bold;color: #333;">
          定价信息
        </div>
        <el-row style="margin-top: 30px;margin-left: 30px;">
          <el-form-item label="是否有合同保证金：">
            <el-radio-group v-model="form.hasContractDepositOptions" :disabled="type == 'detail'">
              <el-radio v-for="item in contractList" :key="item.value" :label="item.value">
                {{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
        <el-row style="margin-left: 30px;">
          <el-form-item label="是否有违章保证金：">
            <el-radio-group v-model="form.hasViolationDepositOptions" :disabled="type == 'detail'">
              <el-radio v-for="item in contractList" :key="item.value" :label="item.value">
                {{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
        <el-row style="margin-left: 30px;">
          <el-form-item label="合同保证金规则：">
            <!-- <el-radio-group v-if="type !== 'detail'" v-model="form.contractDepositMinimumRentMonths" @change="changeRule">
              <el-form :model="form" ref="rulesForm" :rules="rulesForm" label-position="right" style="width: 110%;display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;">
                <el-form-item>
                  <el-radio :label="1">
                    不低于
                    <el-input :disabled="form.contractDepositMinimumRentMonths !==1" v-model="form.aaa" maxlength="8" @input="form.aaa = form.aaa.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1')" placeholder="请输入" style="width: 100px;"></el-input>
                    <span style="color: #606266;margin-left: 5px;">倍月租金</span>
                  </el-radio>
                </el-form-item>
                <el-form-item>
                  <el-radio :label="2">
                    不低于
                    <el-input :disabled="form.contractDepositMinimumRentMonths !==2" v-model="form.bbb" maxlength="8" @input="form.bbb = form.bbb.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1')" placeholder="请输入" style="width: 100px;"></el-input>
                    <span style="color: #606266;margin-left: 5px;">元</span>
                  </el-radio>
                </el-form-item>
                <el-form-item prop="ccc" class="formError">
                  <el-radio :label="3">
                    设置为
                    <el-input :disabled="form.contractDepositMinimumRentMonths !==3" v-model="form.ccc" maxlength="50" placeholder="请输入" style="width: 200px;"></el-input>
                    <span style="color: #606266;margin-left: 5px;">倍月租金</span>
                  </el-radio>
                </el-form-item>
                <el-form-item>
                  <el-radio :label="4">无规则</el-radio>
                </el-form-item>
              </el-form>
            </el-radio-group> -->

            <span style="color: #606266;margin-right: 5px;">不低于</span>
            <el-input v-if="type !== 'detail'" v-model="form.contractDepositMinimumRentMonths" maxlength="8" @input="form.contractDepositMinimumRentMonths = form.contractDepositMinimumRentMonths.replace(/^0|[^0-9]/g, '')" placeholder="请输入" style="width: 100px;"></el-input>
            <span v-else style="color: #606266;margin-right: 5px;">{{ form.contractDepositMinimumRentMonths }}</span>
            <span style="color: #606266;margin-left: 5px;">月租金</span>

            <!-- <span style="color: #606266;margin-left: 5px;">月租金</span>
            <span v-if="type == 'detail'"> 不低于 <span style="color: #1890ff;font-weight: bold;">2</span> 倍月租金 </span>
            <span v-if="type == 'detail'"> 不低于 <span style="color: #1890ff;font-weight: bold;">2</span> 元 </span>
            <span v-if="type == 'detail'"> 设置为 <span style="color: #1890ff;font-weight: bold;">2</span> 倍月租金 </span>
            <span v-if="type == 'detail'"> 无规则 </span> -->
          </el-form-item>
        </el-row>
        <el-row v-if="form.leasingType == 2" style="margin-left: 30px;">
          <el-form-item label="首期租金规则：">
            <span style="color: #606266;margin-right: 5px;">不低于</span>
            <el-input v-if="type !== 'detail'" v-model="form.initialRentMinimumRentMonths" @input="form.initialRentMinimumRentMonths = form.initialRentMinimumRentMonths.replace(/^0|[^0-9]/g, '')" placeholder="请输入" style="width: 100px;"></el-input>
            <span v-else style="color: #606266;margin-right: 5px;">{{form.initialRentMinimumRentMonths}}</span>
            <span style="color: #606266;margin-left: 5px;">月租金</span>
          </el-form-item>
        </el-row>
      </div>
      <div class="card-wrap card-padding">
        <div class="table-title-wrap-other justify-start" style="border-bottom: 1px solid #e9e9e9;font-size: 16px;font-weight: bold;color: #333;">
          修改信息
        </div>
        <el-row style="margin-top: 30px;margin-left: 30px;">
          <el-form-item label="开放合同保证金可修改：">
            <el-switch v-model="form.openContractDepositModification" :disabled="type == 'detail'"></el-switch>
          </el-form-item>
        </el-row>
        <el-row style="margin-left: 30px;">
          <el-form-item label="开放首期租金可修改：">
            <el-switch v-model="form.openInitialRentModification" :disabled="type == 'detail'"></el-switch>
          </el-form-item>
        </el-row>
        <el-row style="margin-left: 30px;">
          <el-col :span="4">
            <el-form-item label="开放尾款可修改：">
              <el-switch v-model="form.openFinalPaymentModification" :disabled="type == 'detail'" @change="changeTion"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="20" v-if="type !== 'detail'">
            <div style="display: flex;flex-wrap: nowrap;justify-content:start;align-items: center;">
              <span style="color: #606266;margin-right: 5px;font-size: 13px;">尾款下限（%）:</span>
              <el-input style="width: 100px;" v-model="form.finalPaymentLowerLimit" maxlength="13" @input="form.finalPaymentLowerLimit=form.finalPaymentLowerLimit.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1')" :disabled="!form.openFinalPaymentModification"></el-input>
              <span style="color: #606266;margin-left: 10px;font-size: 13px;">尾款上限（%）:</span>
              <el-input style="width: 100px;margin-left: 5px;" v-model="form.finalPaymentUpperLimit" maxlength="13" @input="form.finalPaymentUpperLimit=form.finalPaymentUpperLimit.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1')" :disabled="!form.openFinalPaymentModification"></el-input>
            </div>
          </el-col>
          <el-col :span="20" v-else style="margin-top: 5px;">
            <span style="margin-left: 30px;font-size: 14px;color: #606266;">尾款上限（%）：{{ form.finalPaymentUpperLimit }}</span>
            <span style="margin-left: 20px;font-size: 14px;color: #606266;">尾款下限（%）：{{form.finalPaymentLowerLimit }}</span>
          </el-col>
        </el-row>
        <!-- <div style="margin-left: 30px;">
          <el-form-item label="尾款比例限制规则：">
          </el-form-item>
          <el-table :data="form.tableDataList" border style="width: 66%">
            <el-table-column fixed prop="aaaa" label="最小月份" align="center" width="150">
              <template slot-scope="scope">
                <el-input v-if="type !=='detail'" maxlength="8" @change='changeMinMonth(scope.row, scope.$index)' v-model="scope.row.aaaa" @input="scope.row.aaaa = scope.row.aaaa.replace(/^0|[^0-9]/g, '')" style="width: 100%;" />
                <span v-if="type =='detail'">123</span>
              </template>
            </el-table-column>
            <el-table-column prop="bbbb" label="最大月份(含)" align="center" width="150">
              <template slot-scope="scope">
                <el-input v-if="type !=='detail'" @change="changeMaxMonth(scope.row, scope.$index)" maxlength="8" v-model="scope.row.bbbb" @input="scope.row.bbbb = scope.row.bbbb.replace(/^0|[^0-9]/g, '')" style="width: 100%;" />
                <span v-if="type =='detail'">123</span>
              </template>
            </el-table-column>
            <el-table-column prop="cccc" label="能源类型" align="center" width="150">
              <template slot-scope="scope">
                <el-select v-if="type !=='detail'" v-model="scope.row.cccc" placeholder="请选择" style="width: 100%;">
                  <el-option v-for="item in dict.type.energy_type" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
                <dict-tag v-if="type =='detail'" :options="dict.type.energy_type" :value="scope.row.cccc" />
              </template>
            </el-table-column>
            <el-table-column prop="dddd" label="车辆性质" align="center" width="150">
              <template slot-scope="scope">
                <el-select v-if="type !=='detail'" v-model="scope.row.dddd" placeholder="请选择" style="width: 100%;">
                  <el-option v-for="item in dict.type.car_nature" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
                <dict-tag v-if="type =='detail'" :options="dict.type.car_nature" :value="scope.row.cccc" />
              </template>
            </el-table-column>
            <el-table-column prop="ffff" label="尾款下限(含)(%)" align="center" width="150">
              <template slot-scope="scope">
                <el-input @change='changeXx(scope.row, scope.$index)' v-if="type !=='detail'" maxlength="8" v-model="scope.row.ffff" @input="scope.row.ffff = scope.row.ffff.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1')" style="width: 100%;" />
                <span v-if="type =='detail'">123</span>
              </template>
            </el-table-column>
            <el-table-column prop="jjjj" label="尾款上限(含)(%)" align="center" width="150">
              <template slot-scope="scope">
                <el-input @change="changeSx(scope.row, scope.$index)" v-if="type !=='detail'" maxlength="8" v-model="scope.row.jjjj" @input="scope.row.jjjj = scope.row.jjjj.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1')" style="width: 100%;" />
                <span v-if="type =='detail'">123</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="150" align="center">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="handleDelete(scope.row, scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="text-align: center;width: 66%; cursor: pointer;" v-if="type !=='detail'">
            <el-button type="text" @click="addAline">增加一行</el-button>
          </div>
        </div> -->
        <el-row style="margin-left: 30px;">
          <el-form-item label="开放上牌费可修改：">
            <el-switch v-model="form.openRegistrationFeeModification" :disabled="type == 'detail'"></el-switch>
          </el-form-item>
        </el-row>
        <el-row style="margin-left: 30px;">
          <el-form-item label="开放GPS可修改：">
            <el-switch v-model="form.openGpsModification" :disabled="type == 'detail'"></el-switch>
          </el-form-item>
        </el-row>
        <el-row style="margin-left: 30px;">
          <el-form-item label="开放牌照费可修改：">
            <el-switch v-model="form.openLicenseFeeModification" :disabled="type == 'detail'"></el-switch>
          </el-form-item>
        </el-row>
        <el-row style="margin-left: 30px;">
          <el-form-item label="开放替车费可修改：">
            <el-switch v-model="form.openReplacementFeeModification" :disabled="type == 'detail'"></el-switch>
          </el-form-item>
        </el-row>
        <el-row style="margin-left: 30px;">
          <el-form-item label="开放期限可修改：">
            <el-switch v-model="form.openTermModification" :disabled="type == 'detail'"></el-switch>
          </el-form-item>
        </el-row>
      </div>
      <div class="card-wrap card-padding">
        <div class="table-title-wrap-other justify-start" style="border-bottom: 1px solid #e9e9e9;font-size: 16px;font-weight: bold;color: #333;">
          关联信息
        </div>
        <div :style="{marginLeft: (type == 'detail'?'-30px':'50px')}">
          <el-row style="margin-top: 30px;">
            <el-form-item label="保险：">
              <el-checkbox-group v-model="form.insuranceOptions" :disabled="type == 'detail'">
                <el-checkbox v-for="item in insuranceList" :key="item.value" :label="item.value">
                  {{ item.label }}
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="维保：">
              <el-checkbox-group v-model="form.hasMaintenanceOptions" :disabled="type == 'detail'">
                <el-checkbox v-for="item in contractList" :key="item.value" :label="item.value">
                  {{ item.label }}
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-row>
        </div>
      </div>
      <div class="card-wrap card-padding is" v-if="form.internalRateOfReturnCalcMethod == 2">
        <div class="table-title-wrap-other justify-start" style="border-bottom: 1px solid #e9e9e9;font-size: 16px;font-weight: bold;color: #333;">
          年化利率信息
        </div>
        <div style="margin-top: 30px;">
          <tableCommon style="margin-bottom: 40px;margin-right: 50px;" v-model='form' :type="type" ref="tableFormSave"></tableCommon>
        </div>
      </div>
      <div class="card-wrap card-padding">
        <div class="table-title-wrap-other justify-start" style="border-bottom: 1px solid #e9e9e9;font-size: 16px;font-weight: bold;color: #333;">
          车型信息
        </div>
        <div style="display: flex;align-items: center;margin-top: 30px;margin-left: 50px;">
          <p style="font-size: 13px;" v-if="type !== 'detail'">选择车型：</p>
          <el-radio-group v-model="form.vehicleRangeType" v-if="type !== 'detail'">
            <el-radio :label="0">全部车型</el-radio>
            <el-radio :label="1">部分车型</el-radio>
          </el-radio-group>
          <div style="margin-top: -20px;">
            <el-button v-if="type == 'detail' && form.vehicleRangeType == 0" plain style="margin-top: 20px;margin-left: 50px;" round>全部车型</el-button>
            <el-button v-if="type == 'detail' && form.vehicleRangeType == 1" @click="selectedCar" plain style="margin-top: 20px;margin-left: 50px;" round>查看所选车型</el-button>
            <el-button v-if="type == 'edit' && (tempVehicleRangeType == 1 && form.vehicleRangeType == 1)" @click="selectedCar" plain style="margin-top: 20px;margin-left: 50px;" round>查看所选车型</el-button>
          </div>
        </div>
      </div>
    </el-form>
  </div>
</template>
<script>
import tableCommon from "../../../globalField/components/tableCommon";
import { getInsuranceSelectList } from "@/api/cwgd/insuranceSelect";
import {
  save,
  getDetailProduct,
  updateProduct,
  getCommonList,
  getCustomerTypeList,
  addCustomerType,
  deleteCustomerType,
} from "@/api/globalField";
import { deptTreeSelectNone } from "@/api/system/user";
export default {
  dicts: ["energy_type", "product_scheme_type", "business_type_cz", "car_nature"],
  props: {
    type: {
      type: String,
      default: "",
    },
    id: {
      type: String,
      default: "",
    },
  },
  components: {
    tableCommon,
  },
  data() {
    return {
      loading: false,
      oldList: [],
      rulesForm: {
        ccc: [
          { pattern: /^\d+(\.\d{1,2})?([,，]\d+(\.\d{1,2})?)*$/, message: '整数或者小数后2位,配置多个请使用逗号隔开', trigger: 'change' }
        ],
      },
      rules: {
        schemeName: [
          { required: true, message: "请输入产品方案名称", trigger: "blur" },
        ],
        schemeNo: [
          { required: true, message: "请输入产品方案编号", trigger: "blur" },
        ],
        schemeType: [
          { required: true, message: "请选择产品方案类型", trigger: "change" },
        ],
        dateTime: [
          {
            required: true,
            message: "请选择开始时间和结束时间",
            trigger: "change",
          },
        ],
      },
      insuranceLists: [],
      contractList: [
        {
          label: "是",
          value: 1,
        },
        {
          label: "否",
          value: 0,
        },
      ],
      insuranceList: [
        {
          label: "首年保险",
          value: 1,
        },
        {
          label: "合同期保险",
          value: 2,
        },
      ],
      options: [],
      customerTypeIrrList: [],
      props: {
        multiple: true,
        value: "id",
        label: "label",
        children: "children",
        checkStrictly: true,
        emitPath: false,
      },
      value: [0, 100],
      tempVehicleRangeType: 0,
      form: {
        tableDataList: [],
        quotationCustomerTypeIrrListNewList: [],
        vehicleRangeType: 1,
        quotationCustomerTypeIrrList: [],
        hasContractDepositOptions: '',
        hasViolationDepositOptions: '',
        insuranceOptions: [],
        hasMaintenanceOptions: [],
        openContractDepositModification: false,
        openInitialRentModification: false,
        openFinalPaymentModification: false,
        openRegistrationFeeModification: false,
        openGpsModification: false,
        openLicenseFeeModification: false,
        openReplacementFeeModification: false,
        openTermModification: false,
        irrDefaultValue: 15,
        businessSource: 2,
        applicableType: 2,
        vehicleSource: 1,
        leasingType: 1,
        internalRateOfReturnCalcMethod: 1,
      },
      commonValues: [],
      list: [],
    };
  },
  computed: {
    valueNew() {
      return JSON.parse(JSON.stringify(this.value));
    },
    processedArray() {
      return [...this.commonValues];
    },
  },
  created() {
    if (this.type == "detail" || this.type == "edit") {
      this.getList();
    } else {
      this.getInsuranceSelectList();
      this.getCustomerTypeList();
    }
    this.getDeptTree();
  },
  methods: {
    // 最小月份校验
    changeMinMonth(row, i) {
      if (row.bbbb) {
        if (Number(row.aaaa) > Number(row.bbbb)) {
          this.$message.error('最小月份不能大于最大月份')
          this.form.tableDataList[i].aaaa = ''
        }
      }
    },
    // 最大月份校验
    changeMaxMonth(row, i) {
      if (row.aaaa) {
        if (Number(row.bbbb) < Number(row.aaaa)) {
          this.$message.error('最大月份不能小于最小月份')
          this.form.tableDataList[i].bbbb = ''
        }
      }
    },
    // 尾款下限校验
    changeXx(row, i) {
      if (row.jjjj) {
        if (Number(row.ffff) > Number(row.jjjj)) {
          this.$message.error('尾款下限不能大于尾款上限')
          this.form.tableDataList[i].ffff = ''
        }
      }
    },
    // 尾款上限校验
    changeSx(row, i) {
      if (row.ffff) {
        if (Number(row.jjjj) < Number(row.ffff)) {
          this.$message.error('尾款上限不能小于尾款下限')
          this.form.tableDataList[i].jjjj = ''
        }
      }
    },
    // 增加一行
    addAline() {
      this.form.tableDataList.push({})
    },
    // 删除
    /** 删除按钮操作 */
    handleDelete(row, index) {
      this.$modal.confirm("确定删除").then(res => {
        this.form.tableDataList.splice(index, 1)
      })
    },
    changeRule() {
      this.$refs['rulesForm'].clearValidate();
      if (this.form.contractDepositMinimumRentMonths == 1) {
        this.$set(this.form, 'bbb', '')
        this.$set(this.form, 'ccc', '')
      } else if (this.form.contractDepositMinimumRentMonths == 2) {
        this.$set(this.form, 'aaa', '')
        this.$set(this.form, 'ccc', '')
      } else if (this.form.contractDepositMinimumRentMonths == 3) {
        this.$set(this.form, 'aaa', '')
        this.$set(this.form, 'bbb', '')
      } else {
        this.$set(this.form, 'aaa', '')
        this.$set(this.form, 'bbb', '')
        this.$set(this.form, 'ccc', '')
      }
    },
    // 递归拿到所有的数据ID
    extractIds(nodes, idsArray) {
      nodes.forEach((node) => {
        idsArray.push(node.id);
        if (node.children && node.children.length) {
          this.extractIds(node.children, idsArray);
        }
      });
      return idsArray;
    },
    // 全选
    selectAll() {
      const allIds = this.extractIds(this.options, [])
      this.options && this.$set(this.form, "deptIdList", allIds);
    },
    cancelSelectAll() {
      this.$set(this.form, "deptIdList", []);
    },
    async getCustomerTypeListEdit() {
      let res = await getCustomerTypeList({
        businessSource: this.form.businessSource,
      });
      let arr = this.form.quotationCustomerTypeIrrList.map(v => v.quotationCustomerTypeId)
      this.customerTypeIrrList = res.data.map(v => {
        if (arr.includes(v.id)) {
          return {
            ...v,
            disabled: false,
            btnType: 1,
            quotationCustomerTypeId: v.id,
          };
        } else {
          return {
            ...v,
            disabled: true,
            btnType: 1,
            quotationCustomerTypeId: v.id,
          };
        }
      })
      this.oldList = Object.assign([], this.customerTypeIrrList);
    },
    async getList() {
      let res = await getList({
        id: this.valueNew.id,
      })
    },
    // 客户类型
    async getCustomerTypeList() {
      let res = await getCustomerTypeList({
        businessSource: this.form.businessSource,
      })
      this.customerTypeIrrList = res.data.map((item) => {
        return {
          ...item,
          disabled: false,
          btnType: 1,
          quotationCustomerTypeId: item.id,
        };
      });
      this.form.quotationCustomerTypeIrrList = res.data.map((item) => {
        return {
          ...item,
          dimensionality: 1,
          quotationCustomerTypeId: item.id,
          irrList: [{}],
        };
      });
      this.oldList = Object.assign([], this.form.quotationCustomerTypeIrrList);
    },
    setName(data) {
      for (var i in data) {
        // 递归给所有的子集添加disabled禁用属性
        data[i].disabled = true;
        if (data[i].children) {
          this.setName(data[i].children);
        }
      }
      return data;
    },
    /** 查询组织下拉树结构 */
    getDeptTree() {
      deptTreeSelectNone().then((res) => {
        if (this.$route.query.type == "detail") {
          this.options = this.setName(res.data);
        } else {
          this.options = res.data;
        }
        console.log(this.options, "-=-=-=-=");
      });
    },
    changeSplice() {
      // if (this.form.businessSource == 2) {
      // this.getCustomerTypeList();
      this.form.quotationCustomerTypeIrrList = []
      this.getCustomerTypeListEdit()
      // }
    },
    changeTion() {
      if (!this.form.openFinalPaymentModification) {
        this.form = {
          ...this.form,
          finalPaymentLowerLimit: "",
          finalPaymentUpperLimit: "",
        };
      }
    },
    changeRadio() {
      if (this.form.internalRateOfReturnCalcMethod == 3) {
        this.form.irrDefaultValue = 15;
        this.form.irrLowerLimit = 0;
      }
    },
    async getList() {
      this.loading = true
      try {
        let { data } = await getCommonList();
        this.list = data;
        this.getDetailProduct();
        this.loading = false
      } catch (error) {
        console.log(error);
        this.loading = false
      }
    },
    async getDetailProduct() {
      let res = await getDetailProduct(this.$route.query.id);
      this.form = {
        ...res.data,
        hasContractDepositOptions:
          +res.data.quotationProductSchemeAttributeOption
            .hasContractDepositOptions.join(''),
        hasViolationDepositOptions:
          +res.data.quotationProductSchemeAttributeOption
            .hasViolationDepositOptions.join(''),
        contractDepositMinimumRentMonths:
          res.data.quotationProductSchemeRule.contractDepositMinimumRentMonths,
        initialRentMinimumRentMonths:
          res.data.quotationProductSchemeRule.initialRentMinimumRentMonths,
        openContractDepositModification:
          res.data.quotationProductSchemeRule.openContractDepositModification ==
            1
            ? true
            : false,
        openInitialRentModification:
          res.data.quotationProductSchemeRule.openInitialRentModification == 1
            ? true
            : false,
        openFinalPaymentModification:
          res.data.quotationProductSchemeRule.openFinalPaymentModification == 1
            ? true
            : false,
        openRegistrationFeeModification:
          res.data.quotationProductSchemeRule.openRegistrationFeeModification ==
            1
            ? true
            : false,
        openGpsModification:
          res.data.quotationProductSchemeRule.openGpsModification == 1
            ? true
            : false,
        openLicenseFeeModification:
          res.data.quotationProductSchemeRule.openLicenseFeeModification == 1
            ? true
            : false,
        openReplacementFeeModification:
          res.data.quotationProductSchemeRule.openReplacementFeeModification ==
            1
            ? true
            : false,
        openTermModification:
          res.data.quotationProductSchemeRule.openTermModification == 1
            ? true
            : false,
        finalPaymentLowerLimit:
          res.data.quotationProductSchemeRule.finalPaymentLowerLimit,
        finalPaymentUpperLimit:
          res.data.quotationProductSchemeRule.finalPaymentUpperLimit,
        insuranceOptions:
          res.data.quotationProductSchemeAttributeOption.insuranceOptions,
        hasMaintenanceOptions:
          res.data.quotationProductSchemeAttributeOption.hasMaintenanceOptions,
        quotationCustomerTypeIrrList: res.data.quotationCustomerTypeIrrList,
        dateTime: [res.data.effectiveStartTime, res.data.effectiveEndTime],
        irrLowerLimit: Number(
          res.data.quotationProductSchemeRule.irrLowerLimit
        ),
        irrDefaultValue: res.data.quotationProductSchemeRule.irrDefaultValue,
      };
      this.tempVehicleRangeType = res.data.vehicleRangeType;
      this.form.quotationCustomerTypeIrrList.forEach((item) => {
        if (item.dimensionality == 2) {
          item.irrList &&
            item.irrList.forEach((irrItem) => {
              this.list.forEach((item) => {
                if (irrItem.maintenancePackageId == item.id) {
                  irrItem.maintenancePackageName = item.maintenancePackageName;
                  irrItem.residualValueBusinessType = item.residualValueBusinessType;
                }
              });
            });
        }
      });
      this.form.quotationCustomerTypeIrrList.forEach((item) => {
        item.irrList && item.irrList.forEach(v => {
          v.fuelIrr = this.numberRide(v.fuelIrr, 100)
          v.newEnergyIrr = this.numberRide(v.newEnergyIrr, 100)
        })
      })
      if (this.$route.query.type == "edit") {
        this.getCustomerTypeListEdit()
        // this.customerTypeIrrList = this.form.quotationCustomerTypeIrrList.map(
        //   (v) => {
        //     return {
        //       quotationCustomerTypeId: v.quotationCustomerTypeId,
        //       quotationCustomerTypeName: v.quotationCustomerTypeName,
        //       residualValueBusinessType: v.residualValueBusinessType,
        //       disabled: false,
        //       btnType: 1,
        //       dimensionality: 1,
        //       irrList: [{}],
        //     };
        //   }
        // );
        // this.oldList = Object.assign([], this.customerTypeIrrList);
      }
      console.log(this.form.quotationCustomerTypeIrrList, "0-0-0-=");
      this.getInsuranceSelectList();
    },
    getInsuranceSelectList() {
      getInsuranceSelectList().then((res) => {
        if (res.code === 200) {
          this.insuranceLists = res.data;
          if (this.type == "detail") {
            let commonValues = this.insuranceLists.filter(
              (value) =>
                this.form.supplierIdList &&
                this.form.supplierIdList.includes(value.supplierId)
            );
            console.log(commonValues, "commonValues");
            this.commonValues = commonValues;
          }
        }
      });
    },
    selectedCar() {
      if (this.$route.query.type == "detail") {
        this.$router.push({
          name: "VehicleTypeDetail",
          query: {
            type: "detail",
            id: this.$route.query.id,
            beForm: "DetailView",
            matchingRelation: this.form.matchingRelation
          },
        });
      } else {
        this.$router.push({
          name: "VehicleTypeDetail",
          query: {
            type: "edit",
            id: this.$route.query.id,
            beForm: "EditView",
            matchingRelation: this.form.matchingRelation
          },
        });
      }
    },
    add() {
      this.customerTypeIrrList.push({
        quotationCustomerTypeName: "",
        disabled: 3,
        btnType: 2,
      });
    },
    // 新增客户类型
    async saveBtn(row, scope) {
      console.log(row, scope.$index);
      let res = await addCustomerType({
        businessSource: this.form.businessSource,
        quotationCustomerTypeName: row.quotationCustomerTypeName,
        residualValueBusinessType: row.residualValueBusinessType,
      });
      this.$set(this.customerTypeIrrList, scope.$index, {
        id: res.data,
        btnType: 1,
        disabled: true,
        quotationCustomerTypeName: row.quotationCustomerTypeName,
        residualValueBusinessType: row.residualValueBusinessType,
      })
      this.oldList = Object.assign([], this.customerTypeIrrList);
      this.$message({
        message: "保存成功",
        type: "success",
      });
      // this.getCustomerTypeList();
    },
    // 渠道禁用
    forbidden(row, scope, text) {
      console.log(row, 'p');
      if (text == "启用") {
        row.disabled = false;
        let arr = this.oldList
          .map((v, i) => {
            if (
              v.quotationCustomerTypeId == scope.row.quotationCustomerTypeId
            ) {
              return v;
            }
          })
          .filter((i) => i)[0];
        let arrNew = {
          ...arr,
          irrList: [],
          quotationCustomerTypeId: arr.id,
          dimensionality: 1
        }
        this.form.quotationCustomerTypeIrrList.push(arrNew);
      } else if (text == "禁用") {
        row.disabled = true;
        // this.oldList.forEach((v, i) => {
        //   if (v.id == row.id) {
        //     v.disabled = true;
        //   }
        // });
        this.form.quotationCustomerTypeIrrList.forEach((v, i) => {
          if (v.quotationCustomerTypeId == row.quotationCustomerTypeId) {
            this.form.quotationCustomerTypeIrrList.splice(i, 1);
          }
        });
      } else {
        deleteCustomerType(row.quotationCustomerTypeId).then((res) => {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.getCustomerTypeList();
        });
      }
      // localStorage.setItem('customerTypeIrrListOld', JSON.stringify(this.customerTypeIrrList))
    },
    numberChange() {
      this.value = this.valueNew;
    },
    cancel() {
      this.$tab.closeOpenPage(this.$route);
      this._toPage({
        name: "ProductScheme",
      });
    },
    // 校验两个对象是否一致
    objectsEqual(obj1, obj2) {
      const keys1 = Object.keys(obj1).filter(key => obj1[key] !== undefined);
      const keys2 = Object.keys(obj2).filter(key => obj2[key] !== undefined);

      if (keys1.length !== keys2.length) {
        return false;
      }

      for (let key of keys1) {
        if (typeof obj1[key] === 'function' || typeof obj2[key] === 'function') {
          continue; // 忽略函数属性
        }

        if (obj1[key] instanceof Object && obj2[key] instanceof Object) {
          if (!this.objectsEqual(obj1[key], obj2[key])) {
            return false;
          }
        } else if (obj1[key] !== obj2[key]) {
          return false;
        }
      }
      return true;
    },
    isEmptyArray(arr) {
      return Array.isArray(arr) && arr.length === 0
    },
    checkArrayElements(arr) {
      return Array.isArray(arr) && arr.some(element => element === arr[0]);
    },
    error() {
      this.$nextTick(() => {
        const el = document.querySelectorAll(".is")[0];
        el && el.scrollIntoView({ block: "center", behavior: "smooth" });
      });
    },
    save(type) {
      // const obj1 = { a: 1, b: { c: 2 } };
      // const obj2 = { a: 1, b: { c: 9 } };
      // let isAccord = this.objectsEqual(obj1, obj2)
      // console.log(isAccord, 'isAccord');

      let a = this.form.hasContractDepositOptions.toString().split(",")
      let b = this.form.hasViolationDepositOptions.toString().split(",")
      this.formList = {
        ...this.form,
        effectiveStartTime: this.form.dateTime && this.form.dateTime[0],
        effectiveEndTime: this.form.dateTime && this.form.dateTime[1],
        quotationProductSchemeAttributeOption: {
          hasContractDepositOptions: a,
          hasViolationDepositOptions: b,
          insuranceOptions: this.form.insuranceOptions,
          hasMaintenanceOptions: this.form.hasMaintenanceOptions,
        },
        quotationProductSchemeRule: {
          irrDefaultValue: this.form.irrDefaultValue,
          irrLowerLimit: this.form.irrLowerLimit,
          contractDepositMinimumRentMonths:
            this.form.contractDepositMinimumRentMonths,
          initialRentMinimumRentMonths: this.form.initialRentMinimumRentMonths,
          openContractDepositModification: this.form
            .openContractDepositModification
            ? 1
            : 0,
          openInitialRentModification: this.form.openInitialRentModification
            ? 1
            : 0,
          openFinalPaymentModification: this.form.openFinalPaymentModification
            ? 1
            : 0,
          openFinalPaymentModification: this.form.openFinalPaymentModification
            ? 1
            : 0,
          openRegistrationFeeModification: this.form
            .openRegistrationFeeModification
            ? 1
            : 0,
          openGpsModification: this.form.openGpsModification ? 1 : 0,
          openLicenseFeeModification: this.form.openLicenseFeeModification
            ? 1
            : 0,
          openReplacementFeeModification: this.form
            .openReplacementFeeModification
            ? 1
            : 0,
          openTermModification: this.form.openTermModification == true ? 1 : 0,

          finalPaymentUpperLimit: this.form.finalPaymentUpperLimit,
          finalPaymentLowerLimit: this.form.finalPaymentLowerLimit,
        },
        draftType: type == "保存" ? 1 : 0,
      };
      let form = this._.cloneDeep(this.formList)
      //  遍历数据费率除以100
      form?.quotationCustomerTypeIrrList?.forEach(item => {
        item.irrList.forEach(irr => {
          irr.fuelIrr = Number(irr?.fuelIrr) / 100;
          irr.newEnergyIrr = Number(irr?.newEnergyIrr) / 100;
        });
      });
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (form.internalRateOfReturnCalcMethod == 2) {
            let isShow = this.$refs?.tableFormSave?.handleEffect();
            let is = this.form.quotationCustomerTypeIrrList.map(v => {
              if (this.isEmptyArray(v.irrList)) {
                return false;
              } else {
                return true
              }
            })
            console.log(is, 'pppppppppppppp');
            // let isArr = this.checkArrayElements(is)
            let isArr = is.includes(false)
            console.log(isArr, '----');
            // let af = isArr.includes(true)
            if (isArr) {
              this.error()
              return this.$message.error('请填写年化利率信息配置')
            } else {
              if (isShow) {
                const loading = this.$loading({
                  lock: true,
                  text: "保存中",
                  spinner: "el-icon-loading",
                  background: "rgba(0, 0, 0, 0.7)",
                });
                if (this.type == "add") {
                  save(form)
                    .then((res) => {
                      if (res.code == 200) {
                        loading.close();
                        this.$message({
                          message: type == "保存" ? "新增保存成功" : "新增提交成功",
                          type: "success",
                        });
                        this.$tab.closeOpenPage(this.$route);
                        this._toPage({
                          name: "ProductScheme",
                        });
                      }
                    })
                    .catch((err) => {
                      loading.close();
                    });
                } else {
                  updateProduct(form)
                    .then((res) => {
                      if (res.code == 200) {
                        loading.close();
                        this.$message({
                          message: type == "保存" ? "编辑保存成功" : "编辑提交成功",
                          type: "success",
                        });
                        this.$tab.closeOpenPage(this.$route);
                        this._toPage({
                          name: "ProductScheme",
                        });
                      }
                    })
                    .catch((err) => {
                      loading.close();
                    });
                }
              }
            }

          } else {
            const loading = this.$loading({
              lock: true,
              text: "保存中",
              spinner: "el-icon-loading",
              background: "rgba(0, 0, 0, 0.7)",
            });
            if (this.type == "add") {
              form.quotationCustomerTypeIrrList.forEach((v, i) => {
                v.irrList = []
              })
              save(form)
                .then((res) => {
                  if (res.code == 200) {
                    loading.close();
                    this.$message({
                      message: type == "保存" ? "新增保存成功" : "新增提交成功",
                      type: "success",
                    });
                    this.$tab.closeOpenPage(this.$route);
                    this._toPage({
                      name: "ProductScheme",
                    });
                  }
                })
                .catch((err) => {
                  loading.close();
                });
            } else {
              updateProduct(form)
                .then((res) => {
                  if (res.code == 200) {
                    loading.close();
                    this.$message({
                      message: type == "保存" ? "编辑保存成功" : "编辑提交成功",
                      type: "success",
                    });
                    this.$tab.closeOpenPage(this.$route);
                    this._toPage({
                      name: "ProductScheme",
                    });
                  }
                })
                .catch((err) => {
                  loading.close();
                });
            }
          }

        } else {
          this.$nextTick(() => {
            const el = document.querySelectorAll(".el-form-item__error")[0];
            el && el.scrollIntoView({ block: "center", behavior: "smooth" });
          });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.table-title-wrap-other {
  height: 45px;
  background: #fff;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 4px;
  font-style: 16px;
  font-weight: 500;
  color: #333333;
}

.card-wrap {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
}

::v-deep .my-slider .el-slider__input {
  width: 80px !important;
}

::v-deep .el-slider__runway.show-input {
  margin-right: 100px !important;
}
::v-deep .formError .el-form-item__error {
  margin-left: 75px !important;
  margin-top: 5px !important;
}
.formError {
  min-width: 370px !important;
}
</style>
